<template>
  <scroll
      :data="detail"
      :pullUpLoad="true"
      :pullUpText="false"
      :pullDownRefresh="true"
      :pullDownText="downText"
      @pullingDown="pullingDown"
      :bounce="true"
      @touchStart="touchStart"
      @pullingUp="loadMore"
      ref="scroll">
    <div class="detail-desc">
      <div class="header-h"></div>
      <div class="title">商品详情</div>
      <div class="rich-text" v-html="detail" ref="detail"></div>
    </div>
    <div class="jx-info">{{upText}}</div>
  </scroll>
</template>

<script>
  import scroll from '@/components/scroll/scroll';

  export default {
    props: {
      detail: String
    },
    data() {
      return {
				downText:'上拉去商品页',
        upText: '继续拖拽查看评论'
      }
    },
    methods: {
      touchStart(e){
        e.stopPropagation();
      },
			loadMore() {
				if (this.loadMoreStatus === true) {
					this.$emit('loadMore', 2);
					this.loadMoreStatus = false;
				} else {
					this.loadMoreStatus = true;
				}
        this.$refs.scroll && this.$refs.scroll.finishPullUp();
			},
			pullingDown(){
				this.$refs.scroll.finishPullDown();
				this.$emit('loadMore', 0);
      }
    },
    mounted() {
      //解决better-scroll因为图片没有下载完导致的滚动条高度不够，无法浏览全部内容的问题。
      //原因是better-scroll初始化是在dom加载后执行，此时图片没有下载完成，导致滚动条高度计算不准确。
      //利用图片的complete属性进行判断，当所有图片下载完成后再对scroll重新计算。
      let img = this.$refs.detail.getElementsByTagName('img');
      let count = 0;
      let length = img.length;
      if (length) {
        this.timer = setInterval(() => {
          if (count === length) {
						this.$refs.scroll && this.$refs.scroll.refresh();
            clearInterval(this.timer)
          } else if (img[count].complete) {
            count++
          }
        }, 100)
      }
    },
		destroyed() {
			clearInterval(this.timer);
    },
    components: {
      scroll
    }
  }
</script>

<style lang="less">
  @import '../../common/less/variable';

  .scroll {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .jx-info {
    padding: 15px 0;
    text-align: center;
    font-size: @font-size-medium;
  }


  .detail-desc {
    .header-h {
      height: 42px;
    }
    padding-top: 10px;
    background-color: @color-background-l;

    .title {
      padding: 10px;
    }
    .rich-text {
      padding: 12px 10px;
      img {
        max-width: 100%;
      }
    }
  }
</style>
